<template>
  <div class="box">
    <Header/>
    <div class="content">
      <div class="container">
        <div class="box2">
          <div class="list-title">认领任务</div>
          <!-- 输入表单 -->
          <el-form>

            <el-card class="form-item-card">
              <el-form-item label="待转译C源码库地址:" class="form-item">
                <a :href="cUrl" target="_blank">{{ cUrl }}</a>
              </el-form-item>
            </el-card>
            <el-card class="form-item-card">
              <el-form-item label="Rust源码库地址:" class="form-item">
                <el-input
                    v-model="rustUrl"
                    placeholder="请输入 Rust 地址"
                    clearable
                    size="medium"
                />
              </el-form-item>
            </el-card>

            <el-card class="form-item-card">
              <el-form-item label="译码方案描述:" class="form-item">
                <!--                <el-textarea-->
                <!--                    v-model="taskClaimed.readmeDetail"-->
                <!--                    placeholder="请输入任务说明"-->
                <!--                    rows="4"-->
                <!--                    clearable-->
                <!--                    size="medium"-->
                <!--                />-->
                <textarea v-model="readmeDetail" placeholder="请输入内容..."></textarea>

                <!--                <el-textarea-->
                <!--                    v-model="readmeDetail"-->
                <!--                    placeholder="请输入任务描述"-->
                <!--                    rows="4"-->
                <!--                    clearable-->
                <!--                    size="large"-->
                <!--                />-->
              </el-form-item>
            </el-card>

            <div class="btn-container">
              <el-button
                  type="primary"
                  size="large"
                  @click="save()"
                  class="claim-btn">
                认领任务
              </el-button>
              <el-button
                  type="primary"
                  size="large"
                  @click="openWin()"
                  class="claim-btn">
                调用工具
              </el-button>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue';
import {useRoute} from 'vue-router';
import Header from "../components/header.vue";
import router from "../../router";
import {TaskApi} from "../../api/task.ts";
import {ElMessage} from "element-plus";

const route = useRoute();  // 获取当前路由
const cUrl = ref();
const taskId = ref();
const rustUrl = ref();
const readmeDetail = ref();
const obbj = ref();
// const taskClaimed = ref<>({
//   claimUserId: 0,
//   readmeDetail: "",
//   rustUrl: "",
//   taskId: 0,
//   cUrl: ""
// });  // 存储任务详情

// 获取任务详情
const fetchTaskDetail = async (id: number) => {
  try {
    // 模拟获取任务详情的 API
    // const response = await TaskApi.claimList(id);
    // taskClaimed.value = response.data;  // 更新任务详情
    // console.log("获取任务详情:", taskClaimed.value);
  } catch (error) {
    console.error('获取任务详情失败:', error);
  }
};

// 提交任务认领
const save = async () => {
  // console.log("认领任务", taskClaimed);

  // if (!url.value) {
  //   ElMessage.error('请输入转译URL')
  //   return
  // }
  // if (!money.value) {
  //   ElMessage.error('请输入悬赏金额')
  //   return
  // }


  // 提交任务认领的 API 请求
  const response = await TaskApi.claimedTask({
    taskId: taskId.value,
    claimUserId: obbj.value.id,
    rustUrl: rustUrl.value,
    readmeDetail: readmeDetail.value
  });

  if (response.meta.code == 2000) {
    ElMessage.success('认领成功')
    // url.value = ''
    // money.value = ''
  } else {
    ElMessage.error('认领失败')
  }
  // console.log("认领任务接口:", response);
};

const openWin = async () => {
  const url = "https://api.c2rust.cn/code/trans_all"; // 替换为你要打开的地址
  const newWindow = window.open(url, "_blank");

  // console.log("认领任务接口:", response);
};

// 获取路由参数中的任务 ID
onMounted(() => {
  cUrl.value = router.currentRoute.value.query.cUrl;
  taskId.value = router.currentRoute.value.query.taskId;
  let userInfo = sessionStorage.getItem('userInfo')
  if (userInfo) {
    obbj.value = JSON.parse(userInfo)
    console.log(obbj.value)
  }
});
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;

  .content {
    width: 100%;
    max-width: 1200px; /* 限制内容宽度 */
    margin: 0 auto; /* 居中 */
    padding: 20px;

    .container {
      display: flex;
      justify-content: center;
      //align-items: center; /* 垂直居中 */
      min-height: 100vh; /* 确保容器高度至少是全屏 */
    }

    .box2 {
      width: 100%;
      max-width: 600px;
      padding: 20px;
      border: 1px solid #e1e4e8;
      border-radius: 6px;
      background-color: #ffffff;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    }

    .list-title {
      font-size: 20px;
      font-weight: bold;
      color: #24292f;
      margin-bottom: 20px;
    }

    .url-text {
      color: #0366d6;
      font-size: 14px;
      margin-bottom: 20px;

      a {
        color: #0366d6;
        text-decoration: none;
      }

      a:hover {
        text-decoration: underline;
      }
    }

    .form-item-card {
      margin-bottom: 15px; /* 添加卡片间的间距 */
    }

    .form-item {
      margin-bottom: 10px; /* 表单项内部间距 */
    }

    .btn-container {
      margin-top: 20px;
      text-align: center; /* 居中对齐 */
      display: flex; /* 使用 Flexbox 布局 */
      justify-content: space-around; /* 按钮间距均分 */
    }

    .claim-btn {
      width: 45%; /* 每个按钮占一半宽度（带间距） */
      padding: 12px;
      border-radius: 6px;
      font-size: 16px;
    }

    .claim-btn:hover {
      background-color: #2188ff;
    }
  }
}
</style>
